/**
 * ${tableComment} 列表
 *
 * @author motorfu
 * @email ffu@maxleap.com
 * @since ${date}
 */
import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import {
  Icon, Card, Table, Row, Col, Button,
  Input, Select, Modal, message, Tag
} from 'antd';

import Tools from '../../../../utils/tools';
import TableBase from "../../../../common-module/components/TableBase";

import {
  ${className}PageFunc, ${className}CreateFunc,
  ${className}ModifyFunc, ${className}RemoveFunc,
  ${className}BatchRemoveFunc
} from "../../../actions/${className}Action";

import { Add${moduleName}Modal, Edit${moduleName}Modal } from '../index';

const InputSearch = Input.Search;
const Option = Select.Option;

class ${className}Index extends TableBase {
  constructor(props) {
    super(props);
    this.pageFunc = props.${className}PageFunc;
    this.batchRemoveFunc = props.${className}BatchRemoveFunc;
    this.state = {
      pagination: Tools.paginationOptions(),
      dataSource: [],
      refresh: false,
      loading: false,
      selectedRowKeys: [],

      selectItem: {},
      add${moduleName}Visible: false,
      edit${moduleName}Visible: false,

      selectSearchParam: "all",
    };
    this.pageParams = {
      pageNum: 1, pageSize: 15,
      params: {},
      searchParams: {
        all: ""
      }
    };
    this.columns = [{
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
      width: 80,
    <#list columnList as column>
    <#if column.column_name!="id">
    }, {
      title: '${column.column_comment}',
      dataIndex: '${column.column_name}',
      key: '${column.column_name2}',
    </#if>
    </#list>
    }, {
      title: '操作',
      dataIndex: 'operation',
      key: 'opration',
      width: 120,
      render: (text, record) => {
        return (
            <div className='m-table-operation'>
              <a onClick={(e) => this.handleEdit${moduleName}Visible({e: e, item: record, visible: true})}>编辑</a>
              <a className='text-red'
                 onClick={(e) => this.clickRemove(record, e)}>删除</a>
            </div>
        );
      }
    }];
  }

  handleEdit${moduleName}Visible = ({e = {}, item = {}, visible = false, refresh = false, backRefresh = false} = {}) => {
    if (!Tools.isEmptyObj(e)) {
      e.stopPropagation();
    }
    this.setState({edit${moduleName}Visible: visible, selectItem: item});
    this.refersh({refresh,backRefresh});
  }

  handleAdd${moduleName}Visible = ({e = {}, visible = false, refresh = false, backRefresh = false} = {}) => {
    if (!Tools.isEmptyObj(e)) {
      e.stopPropagation();
    }
    this.setState({add${moduleName}Visible: visible});
    this.refersh({refresh,backRefresh});
  }

  clickRemove = (record, e) => {
    e.stopPropagation();
    const confirm = Modal.confirm({
      title: '提示',
      content: `确定删除ID=${r"${record.id}"}的记录？`,
      onOk: () => {
        return new Promise((resolve, reject) => {
          this.props.${className}RemoveFunc(record.id, response => {
            if (response.code === 200) {
              this.state.pagination.total = this.state.pagination.total - 1;
              this.refreshPage();
              resolve();
            } else {
              message.error(response.msg);
              resolve();
            }
          });
        }).catch((msg) => {
          message.error(msg);
          confirm.destory();
        });

      }
    });
  }

  render() {
    const {
      dataSource, loading, refresh, selectItem,
      pagination, selectedRowKeys,
      add${moduleName}Visible, edit${moduleName}Visible
    } = this.state;
    return (
        <Card style={{height: "100%"}}>
          <Row gutter={{xs: 16}} style={{marginBottom: 16}}>
            <Col span={12}>
              <InputSearch style={{width: 320}}
                           addonBefore={
                             <Select value={this.state.selectSearchParam} onChange={this.handleSearchParams}>
                               <Option value='all'>所有项</Option>
                               <#list columnList as column>
                                 <#if column.column_className == 'String'&&column.column_name != 'all'>
                               <Option value='${column.column_name}'>${column.column_comment}</Option>
                                 </#if>
                               </#list>
                              </Select>
                           }
                           value={this.pageParams.searchParams[this.state.selectSearchParam]}
                           onSearch={this.clickSearch}
                           onChange={this.changeSearchParamValue}
                           enterButton
              />

              <Button loading={refresh}
                      type='primary'
                      style={{marginLeft: 16}}
                      onClick={this.refreshPage}>刷新</Button>
              {
                selectedRowKeys.length > 0 && this.batchRemoveFunc !== null ?
                    <Button className='m-btn-red'
                            style={{marginLeft: 16}}
                            icon='delete'
                            loading={this.props.batchRemoveLoading}
                            onClick={this.clickBatchRemove}>删除（{selectedRowKeys.length}）</Button> : null
              }
            </Col>
            <Col span={12} style={{textAlign: 'right'}}>
              <Button type='primary'
                      style={{marginLeft: 16}}
                      onClick={() => this.handleAdd${moduleName}Visible({visible: true})}>添加${tableComment}</Button>
            </Col>
          </Row>
          <Table columns={this.columns}
                 dataSource={dataSource}
                 loading={loading}
                 pagination={pagination}
                 onChange={this.changeData}
                 rowSelection={this.rowSelection()}
                 rowKey="id"
                 size={"middle"}
                 bordered={true}
          />

          {
            this.state.add${moduleName}Visible ?
                <Add${moduleName}Modal visible={add${moduleName}Visible}
                                 onCreate={this.props.${className}CreateFunc}
                                 onClose={({refresh = false} = {}) => this.handleAdd${moduleName}Visible({backRefresh: refresh})}
                /> : null
          }
          {
            this.state.edit${moduleName}Visible ?
                <Edit${moduleName}Modal visible={edit${moduleName}Visible}
                                  itemData={selectItem}
                                  onModify={this.props.${className}ModifyFunc}
                                  onClose={({refresh = false} = {}) => this.handleEdit${moduleName}Visible({backRefresh: refresh})}
                /> : null
          }
        </Card>
    );
  }
}


export default connect(state => {
  return {
    pageLoading: state.${module}.${moduleName?lower_case}.pageLoading,
    pageData: state.${module}.${moduleName?lower_case}.pageData,
    batchRemoveLoading:state.${module}.${moduleName?lower_case}.batchRemoveLoading,
  };
}, dispatch => {
  return bindActionCreators({
    ${className}PageFunc, ${className}CreateFunc,
    ${className}ModifyFunc, ${className}RemoveFunc,
    ${className}BatchRemoveFunc
  }, dispatch);
})(${className}Index);